<template>
	<view>
			<view :style="'position: absolute;top:'+statusBarHeight+'px;z-index: 100;left: 20rpx;'">
				<u-icon @click="goBack()"  name="close-circle-fill" size="50" color="#ffffff"></u-icon>
			</view>
			<view  :style="'height:'+headerHeight+'px'">
				<swiper :style="'height:'+headerHeight+'px'"
						:circular="true"  :indicator-dots="false"  autoplay="true">
						<swiper-item v-for="(image,index) in goodDetail.pathArr" :key="index">
							<view style="width: 100%;height: 100%;">
								<u-image :src="image.path" width="100%" height="100%"></u-image>
							</view>
						</swiper-item>
				</swiper>
			</view>
			
			<scroll-view class="no-scroll-bar"
						:style="'height:'+scrollViewHeight+'px'"
						:scroll-x="false" :scroll-y="true">
				<view class="u-p-20" style="width: 100%;">
					<view style="font-size: 34rpx;">
						<text>{{goodDetail.goodName}}</text>
					</view>
					
					<view class=""  style="font-size: 26rpx;color: #909399;padding: 20rpx 0rpx 20rpx 16rpx;">
						<rich-text :nodes="goodDetail.description"></rich-text>
					</view>
					<view v-if="goodDetail.skuRules&&goodDetail.skuRules.length>0">
						<view class="u-m-t-20" 
								v-for="(skuRule,ruleIndex) in goodDetail.skuRules" :key="ruleIndex">
							<view style="font-size: 26rpx;">{{skuRule.attrTitle}}</view>
							<view style="width: 100%;" 
								  class="u-m-t-20 u-flex u-flex-wrap u-row-left u-col-center ">
								<template v-if="skuRule.attrValues.length>0">
									<view   class="u-m-l-30"  
											@click="selectedAttr(ruleIndex,labelIndex)" 
											v-for="(label,labelIndex) in skuRule.attrValues" :key="labelIndex">
										<u-tag v-if="label.selected"  :text="label.tagLable"  mode="light"  :type="formatTagType(ruleIndex)"/>
										<u-tag v-else  :text="label.tagLable"  mode="light"  type="info"/>
									</view>
								</template>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		
		
			<view class="u-p-20 footer-box" :style="'height:'+footerHeight+'px'">
				<view class="u-flex u-row-between u-col-center" style="width: 100%;">
					<view>
						<view>
							<text style="font-size: 32rpx;font-weight: bold;">¥{{goodDetail.price}}</text>
						</view>
						<view style="font-size: 24rpx;color: #909399;margin-top: 10rpx;">{{formatSelectedAtrr()}}</view>
					</view>
					<view>
						<view class="u-m-l-6" v-if="goodDetail.maxNum>0">
							<u-icon @click="changeCount(1)" top="4" name="minus-circle-fill" color="#B5B1B2" size="40"></u-icon>
							<text style="height: 32rpx;line-height: 32rpx;margin: 0rpx 20rpx;">{{preBuyCount}}</text>
							<u-icon @click="changeCount(0)" top="4" name="plus-circle-fill" color="#f29100" size="40"></u-icon>
						</view>
						<view v-else>
							<text style="font-size: 32rpx;font-weight: bold;">已售罄</text>
						</view>
					</view>
				</view>
				<view class="u-m-t-20 u-p-l-10 u-p-r-10" style="width: 100%;">
					<u-button  :disabled="goodDetail.maxNum<1"  @click="addToShopCar()" type="warning" shape="circle">加入购物车</u-button>
				</view>
			</view>
	</view>
</template>

<script>
	import {tempGoodList} from "@/util/data/goodList.js"; 
	export default {
		data() {
			return {
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight+8,
				scrollViewHeight:0,
				footerHeight:0,
				headerHeight:0,
				goodDetail:{
					//"skuId":"000",
					//"goodName":"小孩蛋糕",
					//"price":69.9,
					"path":this.$u.api.multipartUrl+"goods/4.jpg",
					"pathArr":[{'path':this.$u.api.multipartUrl+"goods/4.jpg",'title':'4'}],
					"priceUnit":"点",
					"quantity":100,
					"dataSourceStr":"京东",
					"type":"xf_mall",
					"skuType":1,
					"salePrice":69.9,
					"status":true,
					"count":1,
					"maxNum":10,
					"skuRules":[
						{
							ruleId:0,
							attrTitle:'温度',
							attrValues:[
								{'tagId':'0','tagLable':'标准','selected':true},
								{'tagId':'1','tagLable':'少冰','selected':false},
							],
						},
						{
							ruleId:1,
							attrTitle:'糖度',
							attrValues:[
								{'tagId':'0','tagLable':'标准','selected':true},
								{'tagId':'1','tagLable':'少冰','selected':false},
							],
						},
						{
							ruleId:2,
							attrTitle:'尺寸',
							attrValues:[
								{'tagId':'0','selected':true,'tagLable':'大(10寸)'},
								{'tagId':'1','selected':false,'tagLable':'中(8寸)'},
								{'tagId':'2','selected':false,'tagLable':'小(6寸)'},
							],
						},
						{	ruleId:3,
							attrTitle:'包装',
							attrValues:[
								{'tagId':'0','tagLable':'精致','selected':true,},
								{'tagId':'1','tagLable':'普通','selected':false,},
							],
						},
					 ],
					 "description":`<p>商品描述商品描述商品描述商品描述商品描述商品描述</p>
					 <p>商品描述商品描述商品描述商品描述商品描述</p>
					 <p>商品描述商品描述商品描述商品描述</p>
					 <p>商品描述商品描述商品描述</p>
					 <p>商品描述商品描述</p>`,
				},
				preBuyCount:1,
			};
		},
		onLoad:function(option){
			let that=this;
			console.log("=======option=====",option);
			let windowHeight=that.$u.sys().windowHeight;
			that.headerHeight=windowHeight/10*3.5;
			that.scrollViewHeight=windowHeight/10*4.4;
			that.footerHeight=windowHeight/10*1.8;
			if(option.skuId!=null&&option.skuId!=undefined&&option.skuId.length>0){
				let skuId=option.skuId;
				that.getGoodDetail(skuId);
			}
		},
		methods:{
			goBack:function(){
				uni.navigateBack();	
			},
			//获取商品详情
			getGoodDetail:function(skuId){
				let that=this;
				console.log("获取商品详情",skuId);
				for (let i = 0; i < tempGoodList.length; i++) {
					let item= tempGoodList[i];
					if(item.children.length>0){
						 let goodList= item.children;
						 for (let j = 0; j < goodList.length; j++) {
						 	let good= goodList[j];
							if(good.skuId==skuId){
								let goodDetail=Object.assign(that.goodDetail,good);
								that.goodDetail=goodDetail;
								console.log("====goodDetail=====",that.goodDetail);
								return;
							}
						 }
					}
				}
				
			},
			//数量
			changeCount:function(option){
				let that=this;
				if(option==0){
					if(this.goodDetail.count==this.goodDetail.maxNum){
						this.$u.toast("存货不足~");
						return;
					}
					if(this.goodDetail.count>4||this.vuex_totalCount>4){
						this.$u.toast("每笔订单限购5个商品,\r\n再来一单吧!");
						return;
					}
					this.preBuyCount++;
				}else{
					if(this.preBuyCount==1){
						that.globalUtil.utilAlert("最少购买1个");
						return;
					}else{
						this.preBuyCount--;
					}
				}
				this.goodDetail.count=this.preBuyCount;
			},
			//加入购物车
			addToShopCar() {
				let that=this;
				that.globalUtil.utilLoading();
				let data=that.goodDetail;
				let tempShopCarData=this.vuex_shopCarData;
				//购物车总数量,总价做处理
				let totalCount=0;
				let totalPrice=0.00;
				let goodId= data.skuId;
				let newCount=this.preBuyCount;
				//如果购物车为空,并且新增的商品数量大于0就加进去
				console.log("==============处理前============",data);
				console.log("tempShopCarData",tempShopCarData);
				console.log("totalCount",totalCount);
				console.log("totalPrice",totalPrice);
				if(tempShopCarData.length<1&&newCount>0){
					console.log("首次加入购物车");
					data.count=newCount;
					tempShopCarData.push(data);
				}else{
					console.log("购物车已经存在数据");
					//是否需要插入的标志,false默认是需要插入的
					let flag=false;
					for (let i = 0; i < tempShopCarData.length; i++) {
						let good= tempShopCarData[i];
						let id=good.skuId;
						//已经存在此商品,直接更新,但是即便count=0,也不能在循环中删除,这样会引起数组下标错乱
						if(id==goodId){
							good.count=good.count+newCount;
							flag=true; 
							break;
						}
					}
					//购物车中没有此商品,需要插入
					if(flag==false){
						data.count=newCount;
						tempShopCarData.push(data);
					}
				}
				
				for (let i = 0; i < tempShopCarData.length; i++) {
					 let item= tempShopCarData[i];
					 totalCount=Number(totalCount)+Number(item.count);
					 totalPrice=Number(totalPrice)+(Number(item.price)*Number(item.count));
				}
				//去小数,保留两位
				totalPrice=that.globalUtil.toDecimal(totalPrice);
				//按购买数量高低排序
				tempShopCarData.sort((x,y)=>{
					return x.count>y.count;
				})
				console.log("=================处理后的数据==================")
				console.log("tempShopCarData",tempShopCarData);
				console.log("totalCount",totalCount);
				console.log("totalPrice",totalPrice);
				this.globalUtil.changeVuexStatu(this,totalCount,totalPrice,tempShopCarData);
				uni.hideLoading();
				uni.navigateBack();
			},
			//选择规格
			selectedAttr:function(ruleIndex,labelIndex){
				console.log("ruleIndex==="+ruleIndex+'======labelIndex'+labelIndex);
				let that=this;
				for (let i = 0; i < that.goodDetail.skuRules.length; i++) {
					for (let j = 0; j <  that.goodDetail.skuRules[i].attrValues.length; j++) {
						if(ruleIndex==i&&labelIndex==j){
							 that.goodDetail.skuRules[i].attrValues[j].selected=true;
						}
						if(ruleIndex==i&&labelIndex!=j){
							 that.goodDetail.skuRules[i].attrValues[j].selected=false;
						}
					}
				}
			},
			//格式化规格显示（颜色区分）
			formatTagType:function(ruleIndex){
				if(ruleIndex==0){
					return "warning";
				}else if(ruleIndex==1){
					return "primary";
				}else if(ruleIndex==2){
					return "success";
				}else if(ruleIndex==3){
					return "error";
				}else{
					return "info";
				}
			},
			//格式化选择的规格
			formatSelectedAtrr:function(){
				let that=this;
				let selectedLabelArr=[];
				let skuRules= that.goodDetail.skuRules;
				if(skuRules&&skuRules.length>0){
					for (let i = 0; i < skuRules.length; i++) {
						  let ruleObj= skuRules[i];
						  let labelArr= ruleObj.attrValues;
						  for (let j = 0; j < labelArr.length; j++) {
						    	let label= labelArr[j].tagLable;
								if(labelArr[j].selected){
									selectedLabelArr.push(label);
								}
								
						  }
					}
					return selectedLabelArr.join("/");
				}
				else{
					return "";
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer-box{
		width: 100%;
		background-color: #ffffff;
		box-shadow: 5rpx 0px 0px 0px #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
</style>
